
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section { display: block; }

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */

img,
object,
embed { max-width: 100%; }

/* force a vertical scrollbar to prevent a jumpy page */

html { overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */

ul { list-style: none; }

blockquote,
q { quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

del { text-decoration: line-through; }

abbr[title],
dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

/* tables still need cellspacing="0" in the markup */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	font-weight: bold;
	vertical-align: bottom;
}

td {
	font-weight: normal;
	vertical-align: top;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

input,
select { vertical-align: middle; }

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] { vertical-align: text-bottom; }

input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline;
}

.ie6 input { vertical-align: text-bottom; }

select,
input,
textarea { font: 99% sans-serif; }

table {
	font-size: inherit;
	font: 100%;
}

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */

a:hover,
a:active { outline: none; }

small { font-size: 85%; }

strong,
th { font-weight: bold; }

td,
td img { vertical-align: top; }

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
}

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* standardize any monospaced elements */

pre,
code,
kbd,
samp { font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */

.clickable,
label,
input[type=button],
input[type=submit],
button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */

button,
input,
select,
textarea { margin: 0; }

/* make buttons play nice in IE */

button {
	width: auto;
	overflow: visible;
}

/* scale images in IE7 more attractively */

.ie7 img { -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover */

.ie6 html { filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

/* let's clear some floats */

.clearfix:before,
.clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

/** START OF BASIC STYLING */


@font-face {
	font-family: 'customFont';
	src: url('../font/WebSymbols-Regular-webfont.eot');
	src: url('../font/WebSymbols-Regular-webfont.eot?#iefix') format('embedded-opentype'),  url('../font/WebSymbols-Regular-webfont.woff') format('woff'),  url('../font/WebSymbols-Regular-webfont.ttf') format('truetype'),  url('../font/WebSymbols-Regular-webfont.svg#WebSymbolsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Bold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Light_Italic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Bold_Italic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */

[data-icon]:before {
	font-family: 'customFont';
	content: attr(data-icon);
	speak: none;
	/*font-weight: normal;*/
	-webkit-font-smoothing: antialiased;
}

body {
	font: 400 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
	background: #fff;
	color: #222;
}

p,
h1,
h2,
h3 {
	margin: 0 0 10px;
	color: #333;
}

h1 { font-size: 2em; }

h2 { font-size: 1.6em; }

h3 { font-size: 1.2em; }

.wrapper {
	width: 98%;
	margin: 0 1%;
}

.header-container {
	width: 100%;
	display: block;
	height: 50px;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1000;
	background: #111;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #3C3C3C ), to( #111 ));
	background-image: -webkit-linear-gradient( #3C3C3C, #111 );
	background-image: -moz-linear-gradient( #3C3C3C, #111 );
	background-image: -ms-linear-gradient( #3C3C3C, #111 );
	background-image: -o-linear-gradient( #3C3C3C, #111 );
	background-image: linear-gradient( #3C3C3C, #111 );
}

.header-container h1.title {
	text-align: center;
	font-size: 2em;
	line-height: 1.85em;
	color: #fff;
	font-weight: 800;
	text-shadow: 0 -1px 1px black;
}

.main-container { padding: 55px 0 50px 0; }

/** END OF BASIC STYLING */

/** START OF FOOTER STYLING */


.footer-container {
	box-shadow: 0 1px 5px #000;
	color: #fff;
	width: 100%;
	height: 45px;
	padding: 2px 3px;
	bottom: 0;
	position: fixed;
	z-index: 1000;
	background: url('../images/menu_bg.png') no-repeat;
	background-size: 100% 100%;
}

nav#footer-nav > ul { list-style-type: none; }

nav#footer-nav > ul > li {
	width: 25%;
	height: 100%;
	display: inline-block;
	float: left;
	text-align: center;
	font-size: 14px;
}

nav#footer-nav > ul > li.active,
nav#footer-nav > ul > li:hover {
	background: rgba(255,255,255, 0.2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-right: none !important;
}

nav#footer-nav li img { height: 70%; }

nav#footer-nav span {
	display: block;
	margin-top: -4px;
}

nav#footer-nav a {
	color: white;
	text-decoration: none;
	display: block;
}

/** END OF FOOTER STYLING */


/** CUSTOM SHIT */

/****************************/
/*			GROUPS			*/
/****************************/


.groups a {
	color: #333;
	text-decoration: none;
}

.groups li.new-group h1 {
	text-decoration: none;
	border: 0;
	height: 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: rgba(0,0,0,.7);
	min-height: 0;
}

.groups.green { border-right: 5px solid green; }

.groups.orange { border-right: 5px solid orange; }

.groups.red { border-right: 5px solid red; }

.groups.gray { border-right: 5px solid gray; }

/****************************************/
/*		BASIC BLOCK LISTS LAYOUT		*/
/****************************************/


.hidden { display: none; }

ul.blocks > li {
	display: block;
	border: 1px solid #c7ddeb;
	padding: 6px;
	background: #e0ecf4;
	margin: 5px 0;
	border-radius: 2px;
}

ul.blocks ul.blocks > li { border-color: #bad5e7; }

ul.blocks > li .inner-content-wrapper { position: relative; }

ul.blocks li .options { max-width: 120px; text-align: right; margin: -4px 0 0; }

ul.blocks li .options a.inactive {
	filter: alpha(opacity=60);
	opacity: 0.6;
	border-color: transparent !important;
}

ul.blocks li .options a {
	display: inline-block;
	font-size: 20px;
	text-decoration: none;
	color: #1D3D52;
	background: #c7ddeb;
	padding: 6px;
	width: 40px;
	border: 1px solid #aecee2;
	border-radius: 3px;
	margin: 4px 0 0 0;
	text-align: center;
}

.alarm.active { border-right: 5px solid green !important; }
.alarm.inactive { border-right: 5px solid red !important; }

/************************/
/*		GROUPLISTS		*/
/************************/

.groups .new-group h1 {
	padding: 0;
	margin: 0;
}

.groups .group-name {
	font-size: 18px;
	font-weight: 800;
	color: #1d3d52;
	letter-spacing: -1px;
	margin: 2px 0 0;
	display: inline;
}

.groups .group-image {
	float: left;
	padding: 3px;
	border: 1px solid #bbd6e6;
	background: #c7ddeb;
	margin: 0 10px 0 0;
}

.groups .buttons { display: block; }

.groups .buttons > li {
	background: #C7DDEB;
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid #BAD5E7;
	border-radius: 3px;
	font-size: 20px;
}

/************************************/
/*		SMALL ALARM	IN GROUP DIV	*/
/************************************/


.rightSide { float: right; }

.groups .group-alarm-first-up {
	display: block;
	padding: 5px 0 5px 8px;
	border-radius: 2px;
	border: 1px solid #bad5e7;
	background: #c7ddeb;
	font-size: 10px;
	font-weight: 400;
	line-height: 11px;
	margin: 0 0 4px 0;
}

.groups .group-alarm-first-up .icon {
	font-size: 12px;
	line-height: 0;
	margin-right: 2px;
}

.groups .group-alarm-first-up .date { }

.groups .group-alarm-first-up .time {
	margin-left: 8px;
	background: #aecee2;
	padding: 5px 8px;
}

/****************************/
/*		GROUP PICTURES		*/
/****************************/


.groups .group-pictures {
	display: block;
	/*position: absolute; bottom: 4px; left: 90px; overflow: hidden;*/
	margin-top: 14px;
}

.groups .group-pictures-large { }

.groups .group-pictures .leader {
	font-size: 8px;
	bottom: 0;
	right: 0;
	position: absolute;
	color: rgba(0,0,0,0.4);
}

.groups .group-pictures .picture-status {
	font-size: 13px;
	display: block;
	height: 50%;
	left: 0;
	top: 0;
	position: absolute;
	padding-top: 50%;
	width: 100%;
	text-align: center;
	line-height: 0;
	color: rgba(0,0,0,0.4);
}

.picture-status.awake { background: rgba(0,255,0,0.2); }

.picture-status.snooze { background: rgba(255,255,0,0.2); }

.picture-status.delay { background: rgba(255,0,0,0.2); }

ul.group-pictures-list {
	list-style-type: none;
	white-space: nowrap;
}

ul.group-pictures-list li {
	position: relative;
	display: inline-block;
	margin: 0 1px 0 0;
	width: 35px;
	height: 35px;
	padding: 1px;
	border: 1px solid #aecee2;
}

/****************************************************/
/*		LARGE GROUP PICTURES LIST IN MEMBERS DIV	*/
/****************************************************/


.groups ul.group-members-large > li .picture {
	float: left;
	display: inline;
	padding: 2px;
	border: 1px solid #bbd6e6;
	background: #c7ddeb;
	margin: 0 5px 0 0;
}

.groups ul.group-members-large > li .meta-data {
	display: inline;
	position: relative;
}

.groups ul.group-members-large > li .meta-data .name {
	font-size: 18px;
	display: block;
}

.groups ul.group-members-large > li .meta-data .buttons {
	position: absolute;
	top: 0;
	right: 10px;
	display: inline-block;
	cursor: pointer;
	font-size: 36px;
	color: #63a0c7;
}

.groups ul.group-members-large > li .actions {
	display: block;
	position: relative;
	padding: 10px 0 0 0;
	margin: 10px 0 0 0;
	border-top: 1px solid #C7DDEB;
	display: block;
}

.groups ul.group-members-large > li .actions li {
	display: inline-block;
	height: 100%;
	background: #c7ddeb;
	width: 32.2%;
	padding: 5px 0;
	border-radius: 3px;
	/*-webkit-box-shadow:  0px 0px 2px 0px rgba(0, 0, 0, 0.5);*/
			/*box-shadow:  0px 0px 2px 0px rgba(0, 0, 0, 0.5);*/
	text-align: center;
	font-size: 18px;
	font-weight: 600;
}

/************************/
/*		GROUP ALARMS 	*/
/************************/


.group-alarms { margin: 10px 0 0 0; }

.group-alarms .alarm .large-inline {
	display: inline-block;
	/*font-size: 14px;*/
	font-weight: 600;
}

.group-alarms .alarm ul.group-alarm-actions-single {
	display: block;
	margin-top: 10px;
}

.group-alarms .alarm ul.group-alarm-actions-single > li {
	display: block;
	font-size: 14px;
	font-weight: 600;
	width: 100%;
	text-align: center;
	margin-bottom: 5px;
	background: #aecde2;
	border-radius: 3px;
	padding: 8px 2%;
}

.alarms .alarm .remove {
	position: absolute;
	font-size: 16px;
	top: 0;
	right: 0;
}

.group-image{
	height: 75px;
	width:75px;
}

/****************************/
/*		PERSONAL ALARMS 	*/
/****************************/


.alarms .new-alarm h1 {
	border: 0;
	text-align: center;
	padding: 0;
	margin: 0;
	font-size: 20px;
}

.alarms .alarm {  }

.alarms .alarm .showTime {
	display: inline-block;
	margin-left: 5px;
}

.alarms .alarm .icon {
	font-size: 28px;
	font-weight: 400;
	float: left;
}

.alarms .alarm .time {
	font-size: 28px;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 5px;
}

.alarms .alarm .smallTime {
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 5px;
}

.alarms .alarm .showDates {
	display: block;
	margin-left: 3px;
	font-size: 11px;
}

.alarms .alarm .showDates li {
	display: inline-block;
	padding: 3px 5px;
	background: #C7DDEB;
	border: 1px solid #AECEE2;
	border-radius: 1px;
	margin-right: 2px;
}

.alarms .alarm .save {
	display: block;
	text-align: center;
	font-size: 20px;
}

.alarm_settings .setTime {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
}

.alarm_settings .setTime select {
	background: #AECEE2;
	border: 1px solid #a1c6de;
	width: 40%;
	padding: 5px;
	font-size: 16px;
	font-weight: 600;
	height: 34px;
	text-align: center;
}

.myAlarmSet span.leader {
	position: absolute;
	font-size: 8px;
}

div.info.clickable { color: #aecee2; }

div.info.finished { color: green; }

.alarms .alarm ul.days {
	font-size: 12px;
	display: block;
	margin-top: 10px;
	width: 100%;
}

.alarms .alarm ul.days li {
	border: 1px solid rgba(0,0,0,0.15);
	padding: 7px 15px 7px 10px;
	width: 60px;
	margin: 0 2px 2px 2px;
	display: inline-block;
	position: relative;
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari */
	box-sizing: border-box;
	text-align: left;
	font-weight: 600;
}

.alarms .alarm ul.days li > span {
	position: absolute;
	right: 5px;
	top: 20%;
	font-weight: 400;
}

.alarms .alarm ul.buttons {
	display: block;
	border-top: 1px solid #c7ddeb;
	padding: 10px 0;
	position: relative;
}

.alarms .alarm ul.buttons > li {
	display: inline-block;
	width: 45%;
	background: #c7ddeb;
	border-radius: 3px;
	padding: 4px 2%;
	text-align: center;
}

.contacts li {
	height: 40px;
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid #ccc !important;
	margin: 0 !important;
	padding: 6px 4px !important;
	border-radius: 0 !important;
}

.contacts li:first-of-type {
	padding-top: 0 !important;
}

.contacts li:last-of-type {
	padding-bottom: 0 !important;
	border: 0 !important;
}

.contacts .picture {
	height: 40px;
	width: 40px;
	float: left;
	border-radius: 4px;
}

.contacts .name {
	font-size: 16px;
	margin: 10px 0 0 6px;
	float: left;
}

.contacts .hasApp {
	position: absolute;
	right: 10px;
	margin-top: 4px;
	font-size: 22px;
}

.contacts .hasApp.yes { color: green; }

.contacts .hasApp.no { color: gray; }

.invites { font-size: 14px; }

.invites .icon {
	font-size: 24px;
	float: left;
	margin-right: 10px;
	margin-bottom: 40px;
}

.invites .leader {
	font-size: 16px;
	font-weight: 600;
}

.invites .groupname {
	font-size: 16px;
	font-weight: 600;
}

.invites .buttons {
	/*position: absolute;
	top: 20%;
	right: 0;*/
	font-size: 28px;
	float: right;
}

.profilePicture {
	width: 60%;
	margin: 0 auto;
	position: relative;
	padding: 3px;
	border: 1px solid #bbd6e6;
	background: #c7ddeb;
	margin-bottom: 20px;
}

.profilePicture img { width: 100%; }

.profileLabel {
	position: absolute;
	width: 100%;
	bottom: 3px;
	height: 20px;
	background: rgba(255,255,255,0.5);
	text-align: center;
	color: #000;
	font-size: 14px;
}

#profielinstellingen {
	background: #e0ecf4;
	border-radius: 3px;
	border: 1px solid #c7ddeb;
	padding: 10px 5px;
}

#profielinstellingen label {
	padding: 0 20px;
	margin: 10px 0;
	display: block;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

#profielinstellingen input,
#profielinstellingen button,
#profielinstellingen select {
	margin: 0 auto 10px;
	display: block;
	width: 90%;
	padding: 10px;
	font-size: 16px;
	text-align: center;
}

/** Popout box theming */


.popoutElement {
	position: fixed;
	top: 15%;
	left: 10%;
	width: 80%;
	background: #C7DDEB;
	border: 1px solid #a1c6de;
	border-radius: 3px;
	z-index: 9999;
	display: none;
	text-align: center;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.popoutElement h1 {
	background: #95bfd9;
	font-size: 18px;
	padding: 7px 0;
	margin: 0;
	display: block;
}

.popoutElement h2 { font-size: 1.25em; }

.popoutElement h3 { margin: 10px 0; }

.popoutElement .content {
	padding: 14px 5px;
	;
	display: block;
	max-height: 300px;
	overflow-y: auto;
}

.popoutElement .lower {
	padding: 2px 0;
	background: #aecee2;
	display: block;
}

.popoutElement .lower a {
	text-decoration: none;
	color: #26506b;
	font-size: 18px;
	display: inline-block;
	width: 49%;
	padding: 5px 0;
}

.popoutElement .btn,
button {
	text-decoration: none;
	background: #aecee2;
	padding: 10px;
	font-weight: 800;
	color: #111;
	display: inline-block;
	border: 1px solid #a1c6de;
	margin-bottom: 5px;
}

.popoutElement input[type='text'] {
	background: #e0ecf4;
	padding: 10px;
	font-weight: 600;
	color: #111;
	display: block;
	border: 1px solid #a1c6de;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 10px;
}

.contacts-select li label {
	font-size: 14px;
	font-weight: 600;
}

.contacts-select li input[type='checkbox'] { margin-left: 5px; }

.snooze{
    border: 2px solid orange !important;
}

.awake{
    border: 2px solid green !important;
}

nav#footer-nav li{
     border-right: none !important;
}

.mooie-knop {
	width: 40%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	padding: 10px 16px;
	background: -moz-linear-gradient(
		top,
		#c7ddeb 0%,
		#3d8cbd);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#c7ddeb),
		to(#3d8cbd));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	border: 1px solid #7d0000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}